import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import cssModules from 'react-css-modules';
import {Button, List, Row, Icon, Form, Select, Input} from 'antd';
import {PageHeader} from 'ant-design-pro';
import DataTable from './DataTable';
import Toolbar from '../../component/Toolbar';
import CommonModal from '../../component/CommonModal';
import NewUsersContent from './NewUsersContent.js';
import UploadPhoto from './UploadPhotos.js';

import styles from './style.less';

@inject('StaffStore', 'StaffNewUsersStore', 'GlobalStore')
@observer
@cssModules(styles)
class SearchList extends Component {
  constructor(props) {
    super(props);

    this.store = this.props.StaffStore;
  }

  async componentWillMount() {
    const {location, match, history} = this.props;

    await this.store.onWillMount(location, match, history);
    await this.props.GlobalStore.setCurrentPage(this);
  }
  reset() {
    const {onWillMount, reset} = this.props.StaffStore;
    onWillMount();
    reset();
  }
  render() {
    const {
      tableData,
      loading,
      apartmentList,
      changePhone,
      changeName,
      changeUserType,
      search,
      userType,
      name,
      phone,
    } = this.store;
    const {newUsers, usersOk, type} = this.props.StaffNewUsersStore;
    let toolbar = [
      {
        type: 'selectItem',
        pos: 'left',
        name: '所属户室',
        children: apartmentList[0]
          ? [{name: '全部', value: ''}, ...apartmentList]
          : [],
        labelCol: 10,
        defaultValue: userType ? userType : '',
        wrapperCol: 14,
        handleChange: value => {
          changeUserType(value);
        },
      },
      {
        type: 'inputItem',
        pos: 'left',
        name: '姓名查询',
        width: 320,
        labelCol: 8,
        defaultValue: name ? name : '',
        wrapperCol: 16,
        handleChange: e => {
          changeName(e.target.value);
        },
      },
      {
        type: 'inputItem',
        pos: 'left',
        name: '手机号查询',
        width: 320,
        labelCol: 8,
        wrapperCol: 16,
        defaultValue: phone ? phone : '',
        handleChange: e => {
          changePhone(e.target.value);
        },
      },
      {
        type: 'button',
        pos: 'left',
        name: '查询',
        bg: 'green',
        handleClick: () => {
          search();
        },
      },
      {
        type: 'button',
        pos: 'right',
        name: '新增用户',
        bg: 'blue',
        className: styles['refresh'],
        handleClick: newUsers,
      },
    ];
    return (
      <div>
        <div styleName={'container'}>
          <Toolbar modules={toolbar} className={styles['toolbar-wrap']} />
          <div>
            <DataTable data={tableData} />
          </div>
          <CommonModal
            title={type === 'new' ? '新增人员' : '编辑人员'}
            width={655}
            type={type}
            onOk={cancle => {
              usersOk(cancle, this.store);
            }}>
            <Row>
              <UploadPhoto />
              <NewUsersContent />
            </Row>
          </CommonModal>
        </div>
      </div>
    );
  }
}
export default SearchList;
